<template>
	<div>
		<h3>MV详情</h3>
		<div class="video-wrap">
			<video controls :src="mvUrl" autoplay></video>
		</div>
		<div class="singer-info">
			<!--<div class="avatar-wrap">
				&lt;!&ndash; 头像 &ndash;&gt;
				<img :src="singerInfo.picUrl" :alt="singerInfo.name" />
			</div>-->
			<!-- 歌手名 -->
			<span class="name">歌手:{{ singerInfo.name }}</span>
		</div>
		<div class="info-wrap">
			<div class="mv-info">
				<!-- 标题 -->
				<h2 class="title">{{ mvInfo.name }}</h2>
				<span class="date">发布：{{mvInfo.publishTime}}</span>
				<!-- 播放次数 -->
				<span class="number">播放：{{ mvInfo.playCount }}次</span>
				<!-- 描述 -->
				<p class="desc">{{ mvInfo.desc }}</p>
			</div>
		</div>

		<div style="height: 200px">

		</div>
	</div>
</template>

<script>
	export default {
		name: "Mv",
		props: ['id'],
		data() {
			return {
				mvUrl:"",
				singerInfo:[],
				mvInfo:[],
				sid:'',
			}
		},
		methods:{

		},
		created(){
			console.log(this.id)
				axios({
					url:"https://autumnfish.cn/mv/url",
					methods: "get",
					params:{
						id:this.id
					},
				}).then(res=>{
					this.mvUrl=res.data.data.url
				})
			axios({
				url:"https://autumnfish.cn/mv/detail",
				methods: "get",
				params:{
					mvid:this.id
				},
			}).then(res=>{
				console.log(res)
				this.sid=res.data.data.artists[0].id;
				this.mvInfo=res.data.data
				axios({
					url:"https://autumnfish.cn/artists",
					methods: "get",
					params:{
						id:this.sid
					},
				}).then(res=>{
					this.singerInfo=res.data.artist
				})
			})

		}
	}
</script>

<style scoped>
	.video-wrap {
		width: 100%;
		height: 390px;
		margin-bottom: 20px;
	}
	video{
		border-radius: 5px;
		height: 100%;
		width: auto;
		outline: none;
	}
	.info-wrap {
		margin-bottom: 50px;
	}
	.singer-info{
		display: flex;
		align-items: center;
		margin-bottom: 35px;
	}
	.avatar-wrap {
		width: 70px;
		height: 70px;
		border-radius: 50%;
		margin-right: 10px;
		overflow: hidden;
	}
	img {
		height: 100%;
	}
	.title {
		font-size: 30px;
	}
	. desc{
		font-size: 15px;
		margin-top: 20px
	}
</style>